<template>
  <t-loading :loading="loading">
    <t-form v-if="type === 'detail'" label-align="left" ref="form" colon :data="formData">
      <t-space size="large" direction="vertical" style="width: 90%; margin: 0 5%">
        <t-row style="align-items: stretch" :gutter="[16, 16]" justify="space-around">
          <t-col :xs="12" :xl="6">
            <t-form-item label="项目名称" name="projectName">
              {{ formData.projectName }}
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="经费类别" name="fundType"> {{ formData.fundType }} </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="金额" name="amount"> {{ formData.amount }}万元 </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="执行时间" name="executionDate"> {{ formData.executionDate }} </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="说明" name="note"> {{ formData.note }} </t-form-item>
          </t-col>
          <t-col :xl="6"></t-col>
        </t-row>
      </t-space>
    </t-form>
    <t-form v-else label-align="left" ref="form" colon :data="formData" :rules="rules">
      <t-space size="large" direction="vertical" style="width: 90%; margin: 0 5%">
        <t-row style="align-items: stretch" :gutter="[16, 16]" justify="space-around">
          <t-col :xs="12" :xl="6">
            <t-form-item label="项目名称" name="projectName">
              <t-select style="width: 70%" :options="projectNameOptions" clearable v-model="formData.projectName" />
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="经费类别" name="fundType">
              <t-select style="width: 70%" clearable v-model="formData.fundType" :options="dict.type.fund_type">
              </t-select>
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="金额" name="amount">
              <t-input-number
                style="width: 70%"
                :step="step"
                clearable
                v-model="formData.amount"
                :min="0"
                suffix="万元"
              />
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="执行时间" name="executionDate">
              <t-date-picker style="width: 70%" clearable v-model="formData.executionDate">
              </t-date-picker>
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="说明" name="note">
              <t-input-number
                style="width: 70%"
                :step="step"
                clearable
                v-model="formData.note"
                :min="0"
                suffix="万元"
              />
            </t-form-item>
          </t-col>
          <t-col :xl="6"></t-col>
        </t-row>
      </t-space>
    </t-form>
  </t-loading>
</template>
    
<script>
export default {
  name: 'add-edit-detail',
  dicts:["fund_type"],
  components: {},
  props: {
    objId: [String, Number],
    header: String,
    type: {
      type: String,
      default: 'add',
    },
  },
  data() {
    return {
      rules: {
        projectName: [{ required: true, message: '项目名称不能为空' }],
        fundType: [{ required: true, message: '经费类别不能为空' }],
        amount: [{ required: true, message: '金额不能为空' }],
        executionDate: [{ required: true, message: '执行时间不能为空' }],
        note: [{ required: true, message: '说明不能为空' }],
      },
      step: 0.5,
      formData: {
        projectName: '',
        fundType: '',
        amount: 0,
        executionDate: '',
        note: 0,
      },
      loading: false,
      projectNameOptions: [],
    };
  },
  watch: {
    'formData.projectName': {
      handler(val) {
        this.formData.projectId = this.projectNameOptions.find((row) => row.label === val)?.id;
      },
      immediate: true,
    },
  },
  created() {
    if (this.type !== 'add') {
      this.$api.kjxm.expenditure
        .fundExecutionDetail(this.objId)
        .then((res) => {
          Object.assign(this.formData, res.data);
          this.$forceUpdate();
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    } else {
      this.$api.kjxm.project
        .myList()
        .then((res) => {
          res.rows.forEach((row) => {
            this.projectNameOptions.push({ label: row.projectName, value: row.projectName, id: row.id });
          });
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate().then((validateResult) => {
        if (validateResult === true) {
          this.loading = true;
          if (this.type === 'add') {
            this.$api.kjxm.expenditure
              .addFundExecution(this.formData)
              .then(() => {
                this.$message.success('新增成功');
                this.$emit('reload');
                this.loading = false;
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.toString());
              });
          } else {
            this.$api.kjxm.expenditure
              .updateFundExecution(this.formData)
              .then(() => {
                this.$message.success('修改成功');
                this.$emit('reload');
                this.loading = false;
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.toString());
              });
          }
        }
      });
    },
  },
};
</script>
